<template>
  <!--生成的列表的 meta-->
  <el-row :gutter="20">
    <el-col :span="6">
      <el-input
        v-model="json"
        type="textarea"
        :autosize="{ minRows: 20, maxRows: 20 }"
        placeholder=""
      ></el-input>
    </el-col>
    <el-col :span="18">
      <nf-grid
        v-grid-drag="gridMeta"
        v-bind="gridMeta"
        :dataList="dataList"
        :selection="selection"
        size="small"
      />
    </el-col>
  </el-row>
  dataId：{{selection.dataId}}<br>
  dataIds：{{selection.dataIds}}<br>
  row：{{selection.row}}<br>
  rows：{{selection.rows}}<br>
</template>

<script lang="ts">
  import { defineComponent, reactive, computed } from 'vue'
  // import { createDataList } from '@naturefw/nf-elp'
  import {
    toMetaGrid
  } from '../../../../lib-excel/main'

  /**
   * 字段 meta
   */
  export default defineComponent({
    name: 'nf-xls-meta-col',
    props: {
    },
    setup(props, context) {

      // 获取表单和字段的meta
      const {
        dataList,
        gridMeta,
        itemMeta
      } = toMetaGrid()

      const json = computed(() => JSON.stringify(gridMeta, null, 2))

      const selection = reactive({
        dataId: '', // 单选ID number 、string
        row: {}, // 单选的数据对象 {}
        dataIds: [], // 多选ID []
        rows: [] // 多选的数据对象 []
      })
      
      // 根据 meta 创建演示数据
      // const _dataList = createDataList(_formMeta.itemMeta, 10).reverse()

      
      return {
        json,
        gridMeta,
        itemMeta,
        dataList,
        selection
      }
    }
  })
</script>